<template>
    <div>
<!--     <div class="order">-->
<!--       <div>-->
<!--         <el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 2 : 0">-->
<!--           <el-card :body-style="{ padding: '0px' }">-->
<!--             <img src="https://th.bing.com/th/id/R.e3c2fd287d0c84a4b29e6a1442069d40?rik=XZZAaduxPHJb3A&pid=ImgRaw&r=0" width="200px" height="300px" class="image">-->
<!--             <div style="padding: 0px;">-->
<!--               <span>芋泥啵啵奶茶</span>-->
<!--               <span></span>-->
<!--             </div>-->
<!--           </el-card>-->
<!--         </el-col>-->
<!--       </div>-->

<!--     </div>-->
      <div style="text-align: center;margin: auto">
        <el-table
            :data="orders"
            border
            style="width:1300px;border-radius: 15px;margin-top: 20px;padding-left: 5px">
          <el-table-column
              align="center"
              label="订单号"
              prop="orderInfo.orderNumber" >
          </el-table-column>
          <el-table-column
              align="center"
              label="下单用户"
              prop="userInfo.username" >
          </el-table-column>
          <el-table-column
              align="center"
              label="订单详情"
              prop="orderInfo" >
            <template slot-scope="scope">
              <el-popover
                  placement="right"
                  trigger="click">
                <div>
                  <el-table :data="scope.row.goodInfo">
                    <el-table-column width="200" property="goodName" label="商品名称"></el-table-column>
                    <el-table-column width="80" property="count" label="数量">
                      <template slot-scope="scope">
                        ×&nbsp;{{scope.row.count}}
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="margin: 5px;color: #409EFF">总价：￥{{scope.row.orderInfo.totalPrice}}</div>
                </div>
                <el-button slot="reference" style="background-color: #fced6e;border:none">查看详情</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <!--            <el-table-column-->
          <!--                    label="送达地址"-->
          <!--                    prop="addressInfo.address" >-->
          <!--            </el-table-column>-->
          <el-table-column
              align="center"
              label="创建时间"
              prop="orderInfo.createTime" >
          </el-table-column>
          <el-table-column
              align="center" >
            <template slot="header" slot-scope="scope">
              <span>操作</span>
<!--              <el-input-->
<!--                  v-model="search"-->
<!--                  size="mini"-->
<!--                  placeholder="输入关键字搜索"/>-->
            </template>
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="warning"
                  @click="pick(scope.row)">接单</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>

</template>

<script>
    export default {
        name: "NewRiderOrder",
        created(){
            this.did = this.$store.getters.getDid;
            console.log(this.did);
            this.axios.get("http://localhost:8084/getFreeOrders",{
                params:{
                    did:this.did,
                    pageSize: this.pageSize,
                    currentPage: this.currentPage
                }
            }).then(resp=>{
                console.log(resp.data);
                this.orders = resp.data.orders;
                this.total = resp.data.totalCount;
            })
        },
        data(){
            return{
                sid:'',
                orders:[
                    {
                        orderNumber:'',
                        userInfo:'',
                        orderInfo:'',
                        addressInfo:'',
                        createTime:''
                    }
                ],

                /*分页*/
                pageSize:5,
                total: 0,
                currentPage: 1,
                pageSizes:[1,2,3,4,5,6,7,8,9,10],

                search:'',
            }
        },
        methods:{
            /*接单*/
            pick(item){
                this.$confirm("确定要接单吗？", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.get("http://localhost:8084/pickOrderByDid",{
                        params:{
                            oid:item.orderInfo.oid,
                            did:this.$store.getters.getDid
                        }
                    }).then(resp=>{
                        if (resp.data === "success") {
                            this.$message({
                                message: "接单成功！！！",
                                type: 'success'
                            });
                            this.flush();
                        } else {
                            this.$message({
                                message: "接单失败！！！",
                                type: 'warning'
                            });
                            this.flush();
                        }
                    })
                })
            },

            /*刷新*/
            flush(){
                this.$router.push({
                    name:"blank",
                    params:{
                        url:"newRiderOrder"
                    }
                })
            },

            /*分页相关*/
            handleSizeChange(val) {
                this.pageSize = val;
                const that = this;
                this.axios.get("http://localhost:8084/getFreeOrders",{
                    params:{
                        did:this.$store.getters.getDid,
                        pageSize: this.pageSize,
                        currentPage: this.currentPage
                    }
                }).then(resp=>{
                    this.orders = resp.data.orders;
                    this.total = resp.data.totalCount;
                });
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                const that = this;
                this.axios.get("http://localhost:8084/getFreeOrders",{
                    params:{
                        did:this.$store.getters.getDid,
                        pageSize: this.pageSize,
                        currentPage: this.currentPage
                    }
                }).then(resp=>{
                    this.orders = resp.data.orders;
                    this.total = resp.data.totalCount;
                });
            }
        }
    }
</script>

<style scoped>
.order {
  display: flex;
}
    .el-table{
        line-height: 50px;
        margin: auto;
    }

    .cell{
        width: 50px;
    }

</style>
